import { useState } from 'react'
import './index.scss'
import { LeftOutline, CloseOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { RightOutlined } from '@ant-design/icons'

/**
 * 候诊查询页面组件
 * 功能：显示患者的候诊信息，支持切换不同患者
 */
function Hzcx() {
    const navigate = useNavigate()
    const [activeTab, setActiveTab] = useState('候诊')
    const [showModal, setShowModal] = useState(false) // 控制选择就诊人模态框的显示/隐藏
    const [selectedPatient, setSelectedPatient] = useState('王小美') // 当前选中的患者姓名

    /**
     * 处理切换按钮点击事件
     * 显示选择就诊人的模态框
     */
    const handleSwitch = () => {
        setShowModal(true)
    }

    /**
     * 关闭模态框
     */
    const handleCloseModal = () => {
        setShowModal(false)
    }

    /**
     * 选择患者
     * @param {string} patientName - 患者姓名
     */
    const handleSelectPatient = (patientName: string) => {
        setSelectedPatient(patientName) // 更新选中的患者
        setShowModal(false) // 关闭模态框
    }

    /**
     * 患者数据列表
     * 包含每个患者的完整信息
     */
    const patients = [
        {
            name: '王小美',
            id: '2015****10',
            gender: '女',
            age: '25岁'
        },
        {
            name: '李玲玲',
            id: '2015****11',
            gender: '女',
            age: '30岁'
        }
    ]

    // 获取当前选中患者的完整信息
    const currentPatient = patients.find(p => p.name === selectedPatient) || patients[0]

    return (
        <div className='hzcx'>
            <div className='hzcx-top'>
                <span>{<LeftOutline className='hzcx-top-left' onClick={() => navigate(-1)}></LeftOutline>}</span>
                <span className='hzcx-top-title'>候诊查询</span>
            </div>
            <div className='hzcx-bg'>
                <div className='account-card'>
                    <div className='account-info'>
                        <div className='account-name'>{currentPatient.name}</div>
                        <div className='account-id'>{currentPatient.id}</div>
                    </div>
                    <div className='account-switch' onClick={handleSwitch}>
                        <div className='switch-icon'>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16 17L21 12L16 7" stroke="#1890ff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                <path d="M21 12H9" stroke="#1890ff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="#333" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                            </svg>
                        </div>
                        <span className='switch-text'>切换</span>
                    </div>
                </div>
            </div>
            <div className='hzcx-bg-two'>
                <div className='segment-control'>
                    <div
                        className={`segment-item ${activeTab === '候诊' ? 'active' : ''}`}
                        onClick={() => setActiveTab('候诊')}
                    >
                        候诊 (接诊)
                    </div>
                    <div
                        className={`segment-item ${activeTab === '检查' ? 'active' : ''}`}
                        onClick={() => setActiveTab('检查')}
                    >
                        检查
                    </div>
                    <div
                        className={`segment-item ${activeTab === '取药' ? 'active' : ''}`}
                        onClick={() => setActiveTab('取药')}
                    >
                        取药
                    </div>
                </div>
                <div className='hzcx-bg-two-item'>
                    {activeTab === '候诊' && (
                        <div className='doctor-list'>
                            <div className='doctor-card'>
                                <div className='doctor-avatar'>
                                    <img src="../../../public/59.png" alt="" />
                                </div>
                                <div className='doctor-info'>
                                    <div className='doctor-info-top'>
                                        <div className='doctor-name'>刘医生</div>
                                        <div className='doctor-title'>主任医师</div>
                                    </div>
                                    <div className='doctor-department-info'>
                                        <div className='doctor-department'>门诊外一科</div>
                                        <div className='doctor-hospital'>四川省保健院南苑</div>
                                    </div>
                                    <div className='consultation-info'>
                                        <div className='current-number'>
                                            <span className='label'>当前接诊号</span>
                                            <span className='number'>15</span>
                                        </div>
                                        <div className='view-queue' onClick={() => navigate('/hzxq')}>查看排队情况 {<RightOutlined />}</div>
                                    </div>
                                </div>
                            </div>

                            <div className='doctor-card'>
                                <div className='doctor-avatar'>
                                    <img src="../../../public/59.png" alt="" />
                                </div>
                                <div className='doctor-info'>
                                    <div className='doctor-info-top'>
                                        <div className='doctor-name'>张医生</div>
                                        <div className='doctor-title'>主任医师</div>
                                    </div>

                                    <div className='doctor-department-info'>
                                        <div className='doctor-department'>口腔科</div>
                                        <div className='doctor-hospital'>四川省保健院南苑</div>
                                    </div>
                                    <div className='consultation-info'>
                                        <div className='current-number'>
                                            <span className='label'>当前接诊号</span>
                                            <span className='number'>6</span>
                                        </div>
                                        <div className='view-queue' onClick={() => navigate('/hzxq')}>查看排队情况 {<RightOutlined />}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )}

                    {activeTab === '检查' && (
                        <div className='queue-content'>
                            {/* 排队信息卡片 */}
                            <div className='queue-info-card'>
                                <div className='queue-info-left'>
                                    <div className='waiting-label'>前方等待人数</div>
                                    <div className='waiting-number'>15</div>
                                </div>
                                <div className='queue-info-right'>
                                    <div className='department-name'>CT检查室</div>
                                    <div className='hospital-name'>四川省保健院南苑</div>
                                </div>
                            </div>
                        </div>
                    )}

                    {activeTab === '取药' && (
                        <div className='queue-content'>
                            {/* 排队信息卡片 */}
                            <div className='queue-info-card'>
                                <div className='queue-info-left'>
                                    <div className='waiting-label'>前方等待人数</div>
                                    <div className='waiting-number'>15</div>
                                </div>
                                <div className='queue-info-right'>
                                    <div className='department-name'>门诊西药房 2号窗口</div>
                                    <div className='hospital-name'>四川省保健院南苑</div>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            </div>

            {/* 选择就诊人模态框 */}
            {showModal && (
                <div className='modal-overlay' onClick={handleCloseModal}>
                    <div className='modal-content' onClick={(e) => e.stopPropagation()}>
                        <div className='modal-header'>
                            <span className='modal-title'>选择就诊人</span>
                            <CloseOutline className='close-btn' onClick={handleCloseModal} />
                        </div>
                        <div className='patient-list'>
                            {patients.map((patient, index) => (
                                <div
                                    key={index}
                                    className={`patient-item ${selectedPatient === patient.name ? 'selected' : ''}`}
                                    onClick={() => handleSelectPatient(patient.name)}
                                >
                                    <span className='patient-name'>{patient.name}</span>
                                    <span className='patient-id'>{patient.id}</span>
                                </div>
                            ))}
                        </div>
                        <div className='modal-footer'>
                            <button className='add-patient-btn'>添加就诊人</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}

export default Hzcx